import React from 'react'
import { changeNav } from '../actions'
import { connect } from 'react-redux'
import { Button, WingBlank, WhiteSpace, List, Checkbox, Toast, Card, Icon, Grid, Badge } from 'antd-mobile'
import { ajaxGet, ajaxPost } from 'wxAjaxUtil';
import hhistory from '../history'
import { mdSelect } from '../actions/wxCommonAction';


const CheckboxItem = Checkbox.CheckboxItem;

class SelectDr extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			storeData: [],
			selectCounts: 0,
			counts: 0,
			res: [],
			isAllChecked: false,
		};
		this.handleChange = this.handleChange.bind(this);
		this.saveSubStore = this.saveSubStore.bind(this);
	}

	componentDidMount() {
		this.props.tochangeNav({
			title: "选择门店", rbtn: [
				<Button key="1" type="primary" onClick={this.saveSubStore} inline size="small">确定</Button>
			]
		});
		var postData = {
			"groupCode": this.props.jtData.code,
		}
		ajaxPost("/o2o/sly/dic/bd/store/list", postData, 'wxApiPath').then(res => {
			if (res.code && res.code == "0") {
				for (var i = 0; i < res.data.length; i++) {
					res.data[i].isChecked = false;
					// res.data[i].index=i;
				}
				this.setState({
					res: res.data,
					counts: res.data.length
				});

			} else {
				Toast.fail('获取门店列表失败', 1);
			}
		});
		this.selectSubStore();

	}
	handleChange = (e, i) => {
		console.log(i)
		this.state.res[i].isChecked = !this.state.res[i].isChecked;
		if (this.state.res[i].isChecked == false) {
			this.state.selectCounts--;
		} else {
			this.state.selectCounts++;
		}
		console.log(this.state.selectCounts);
		this.setState({
			selectCounts: this.state.selectCounts,
			res: this.state.res
		});
	}
	//收集选中项
	selectSubStore() {
		for (var i = 0; i < this.state.res.length; i++) {
			if (this.state.res[i].isChecked) {
				this.state.storeData.push({
					"code": this.state.res[i].code,
					"name": this.state.res[i].name,
					"cityCode": this.state.res[i].cityCode,
					"logo": this.state.res[i].logo
				});
			}
		}

	}

	//点击确定按钮提交
	saveSubStore() {
		this.selectSubStore();
		console.log(this.state.storeData);
		// this.props.handleSubStore(this.state.storeData);//传递到父组件
		this.props.mdSelect(mdSelect(this.state.storeData));
		var backRouter = this.props.location.state.backRouter;
		hhistory.push({
			pathname: backRouter,
			state: this.state.storeData
		});
	}

	//修改状态
	changeAllStatus = (isChecked) => {
		for (var i = 0; i < this.state.res.length; i++) {
			this.state.res[i].isChecked = !isChecked;
		}
		if (isChecked) {
			this.setState({
				selectCounts: 0,
				res: this.state.res,
				isAllChecked: !isChecked
			});
		} else {
			this.setState({
				selectCounts: this.state.counts,
				res: this.state.res,
				isAllChecked: !isChecked
			});
		}

	}

	// 	this.checkAll()
	// }
	//如果所有任务都完成了，就设置isAllChecked都为true
	// checkAll() {
	// 	if (this.state.res.every(function (todo) { return todo.isChecked })) {
	// 		this.setState({
	// 			isAllChecked: true
	// 		});
	// 	} else {
	// 		this.setState({
	// 			isAllChecked: false
	// 		});
	// 	}

	// }



	render() {
		return (
			<div>
				<WhiteSpace />
				<div style={{ position: "relative", lineHeight: "100px" }}>
					<div style={{ position: 'relative', textAlign: 'center', height: '100px' }}>
						<img style={{
							marginTop: '10px',
							width: '80px',
							height: '80px',
						}} src="https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png" />
					</div>
					<p style={{ height: '60px', textAlign: 'center', lineHeight: '60px' }}>北京一麻一辣什么什么餐饮有限公司</p>
				</div>
				<WingBlank>
					<div style={{ fontSize: '24px' }}>
						共<i style={{ fontStyle: 'normal', color: '#ecc383' }}>{this.state.counts}</i>个门店，已选<i style={{ fontStyle: 'normal', color: '#ecc383' }}>{this.state.selectCounts}</i>个门店<div style={{ float: "right" }} onClick={() => this.changeAllStatus(this.state.isAllChecked)}>
							{
								!this.state.isAllChecked
									? <Icon style={{ width: '35px', height: '35px' }} type={require('./assets/icon_sh_quanxuan_1.svg')} size={"sm"} />
									: <Icon style={{ width: '35px', height: '35px' }} type={require('./assets/icon_sh_quanxuan_2.svg')} size={"sm"} />
							}
						</div>
					</div>
				</WingBlank>


				{this.state.res.map((i, index) => (
					<div style={{ backgroundColor: '#f7f7f7' }}>
						<WhiteSpace />
						<div style={{ position: 'relative', height: '80px', backgroundColor: '#ffffff' }} key={index} checked={i.isChecked} onClick={(evt) => this.handleChange(evt, index)}>
							<img style={{ height: '60px', width: '60px', float: 'left', marginLeft: '25px', marginTop: '10px', borderRadius: '15%' }} src={i.logo} />
							<div style={{ position: 'absolute', left: '120px', top: '20px' }}>{i.name}</div>
							{
								!i.isChecked
									? <Icon style={{ float: "right", marginRight: '20px', marginTop: '20px' }} type={require('./assets/icon_gg_duoxuan_1.svg')} size={"sm"} />
									: <Icon style={{ float: "right", marginRight: '20px', marginTop: '20px' }} type={require('./assets/icon_gg_duoxuan_2.svg')} size={"sm"} />
							}

						</div>
					</div>
				))}


			</div>
		)
	}

	onChange = (val) => {
		console.log(val);
	}
}

const mapStateToProps = (state) => ({
	jtData: state.wxSmartdrs.jtData
})
const mapDispatchToProps = (dispatch) => ({
	tochangeNav: navogj => dispatch(changeNav(navogj)),
	mdSelect: action => { dispatch(action) }
})

export default connect(mapStateToProps, mapDispatchToProps)(SelectDr)